<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<div id="app">
    {{msg}}
    <hr> <input type="text" v-model.number="a">
    <select name="" id="" v-model="x">
      <option value="+">+</option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
    </select>
    <input type="text" v-model.number="b"> {{sum}}





</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.14/vue.min.js"></script>
<script>
    const vu = new Vue({
        el: "#app",
        data: {
            msg: 'hello vue',
            a: 1,
            b: 2,
            x: '+'

        },
        methods: {

        },
        computed: {
            sum() {
                // switch (this.x) {
                //     case '+':
                //         return this.a + this.b
                //     case '-':
                //         return this.a - this.b
                //     case '/':
                //         return this.a / this.b
                //     case '*':
                //         return this.a * this.b
                if (this.x == '+') {
                    return this.a + this.b
                } else if (this.x == '-') {
                    return this.a - this.b
                } else if (this.x == '*') {
                    return this.a * this.b
                } else {
                    return this.a / this.b
                }
                // } 
            }

        }
    })
</script>






</body>

</html>